<template>
  <div ref="echartDom"></div>
</template>

<script setup>
import {ref, defineProps, onMounted, onUnmounted, inject, shallowRef, defineExpose} from 'vue'
import {pxToRem} from "@/utils/index";

const echarts = inject('echarts');
const props = defineProps({
  barData: {
    type: Object,
    default: () => {
    }
  },
  dialogData: {
    type: Object,
    default: () => ({
      fontSizeTimes: 1
    })
  }
});

const echartDom = ref(null);
const myChart = shallowRef(null);

const tempDom = (params) => {
  let tempDom = ''
  const tempTbClass = params?.data?.areaTb ? 'triangle-reverse' : ''
  const tempHbClass = params?.data?.areaHb ? 'triangle-reverse' : ''
  const tempTbColor = params?.data?.areaTb ? '#01FEFF' : '#E13535'
  const tempHbColor = params?.data?.areaHb ? '#01FEFF' : '#E13535'

  switch(props?.barData?.type) {
    case 1:
      tempDom = '<br/>' + `<div style="display: flex; align-items: center"><div class="triangle ${tempTbClass}"></div>&nbsp;<span style="color: ${tempTbColor}">${params.data?.areaTb}%</span>` + `&nbsp;同比</div>`
          + `<div style="display: flex; align-items: center"><div class="triangle ${tempHbClass}"></div>&nbsp;<span style="color: ${tempHbColor}">${params.data?.areaHb}%</span>` + `&nbsp;环比</div>`
      break
    case 2:
      tempDom = '<br/>' + `<div style="display: flex; align-items: center"><div class="triangle ${tempTbClass}"></div>&nbsp;<span style="color: ${tempTbColor}">${params.data?.areaTb}%</span>` + `&nbsp;同比</div>`
      break
    default:
      tempDom = ''
      break
  }
  return tempDom
}

const initEchart = () => {
  if (echartDom.value) {
    myChart.value = echarts.init(echartDom.value);
    let option = {
      itemStyle: {
        borderRadius: [pxToRem(50), pxToRem(50), 0, 0],
      },
      color: '#00FBFF',
      barMaxWidth: pxToRem(11 * props?.dialogData?.fontSizeTimes),
      grid: {
        left: 0,
        right: 0,
        bottom: 0,
        top: `${props?.dialogData?.fontSizeTimes === 1 ? 30 : 10}%`,
        containLabel: true
      },
      tooltip: {
        trigger: 'axis',
        formatter: function (params) {
          return (
              '面积：' + `${params[0].value}万㎡` + '<br/>' +
              '平均去化周期：' + `${params[1].value}月` + tempDom(params[0])
          )
        }
      },
      xAxis: {
        type: 'category',
        data: props?.barData?.xAxisData,
        axisTick: {
          show: false // 不显示坐标轴刻度线
        },
        axisLine: {
          show: false, // 不显示坐标轴线
        },
        splitLine: {
          show: false // 不显示网格线
        },
        axisLabel: {
          color: 'white',
          fontSize: pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 12 : 20),
          interval: 0,
        }
      },
      yAxis: [
        {
          min: 0,
          max: (value) => value.max || 100,
          axisTick: {
            show: false // 不显示坐标轴刻度线
          },
          axisLine: {
            show: false, // 不显示坐标轴线
          },
          splitLine: {
            show: false // 不显示网格线
          },
          axisLabel: {
            fontSize: pxToRem(9 * props?.dialogData?.fontSizeTimes),
            color: 'white',
            fontWeight: 'lighter'
          },
          name: "面积：万㎡",
          nameTextStyle: {
            color: "white",
            fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
            fontWeight: 'lighter',
            padding: [0, 0, 0, pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 20 : 50)]
          },
          position: 'left'
        },
        {
          type: 'value',
          min: 0,
          max: (value) => value.max || 100,
          axisTick: {
            show: false // 不显示坐标轴刻度线
          },
          axisLine: {
            show: false, // 不显示坐标轴线
          },
          splitLine: {
            show: false // 不显示网格线
          },
          axisLabel: {
            fontSize: pxToRem(9 * props?.dialogData?.fontSizeTimes),
            color: 'white',
            fontWeight: 'lighter'
          },
          name: "平均去化周期(月)",
          nameTextStyle: {
            color: "white",
            fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
            fontWeight: 'lighter',
            padding: [0, 0, 0, props?.dialogData?.fontSizeTimes === 1 ? -55 : -130]
          },
          position: 'right'
        },
      ],
      series: [
        {
          name: "面积：万㎡",
          data: props?.barData?.seriesData,
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: '#08AAFF',
            borderRadius: [pxToRem(50), pxToRem(50), 0, 0]
          },
          yAxisIndex: 0,
        },
        {
          name: "平均去化周期(月)",
          data: props?.barData?.lineData,
          type: 'line',
          step: 'start',
          color: '#ff009a',
          yAxisIndex: 1,
          markLine: {
            symbol: ['none'], //['none']表示是一条横线；['arrow', 'none']表示线的左边是箭头，右边没右箭头；['none','arrow']表示线的左边没有箭头，右边有箭头
            label: {
              position: "middle", //将警示值放在哪个位置，三个值“start”,"middle","end" 开始 中点 结束
              color: '#ff4444',
              padding: [0, 0, 0, pxToRem(400)],
              formatter: (params) => {
                return `去化周期预警：${params.value}个月`
              },
              fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
              viewport: true
            },
            silent: true, //鼠标悬停事件 true没有，false有
            data: [
              {
                silent: true, //鼠标悬停事件 true没有，false有
                lineStyle: { //警戒线的样式 ，虚实 颜色
                  type: "solid", //样式  ‘solid’和'dotted'
                  color: "#ff4444",
                  width: 1,   //宽度
                  padding: [30,30]
                },
                yAxis: 60 // 警戒线的标注值，可以有多个yAxis,多条警示线 或者采用 {type : 'average', name: '平均值'}，type值有 max min average，分为最大，最小，平均值
              }]
          }
        },
      ],
    }
    option && myChart.value.setOption(option, true);
  }
}

const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  initEchart();
};

const disposeChart = () => { // 销毁旧图表实例
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
}

defineExpose({
  updateChart,
  disposeChart
})

onMounted(() => {
  initEchart();
  window.addEventListener("resize", updateChart);
})

onUnmounted(() => {
  window.removeEventListener("resize", updateChart);
})
</script>

<style scoped lang="less">
.h132 {
  height: 162px;
}
.dialog-h132 {
  width: 1120px;
  height: 500px;
}
.h293 {
  height: 293px;
}

:deep(.triangle) {
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top: 5px solid #E13535;
  border-bottom: 0;
  display: inline-flex;
  align-items: center;
  margin-right: 5px;
}

:deep(.triangle-reverse) {
  transform: rotate(180deg);
  border-top: 5px solid #01FEFF;
}
</style>